<template>
    <div class="main">
        <div class="header">
            <em class="milogo">
                <svg width="100%" height="100%" version="1.1" xmlns="http://www.w3.org/2000/svg">
                    <rect width="48" height="48" rx="3" ry="3" style="fill:#ff6700"></rect>
                </svg>
            </em>
            <h4 class="header_tit_txt" id="login-title">真香帐号登录</h4>
        </div>
        <!-- 手机号登录 -->
        <van-form @submit="onSubmit" v-if="btnname == 'iphone'">
            <van-row class="input-row">
                <van-field
                    v-model="iphone"
                    name="手机号码"
                    label="+86 >"
                    placeholder="手机号码"
                    label-width="55"
                    label-class="colorla"
                    :rules="[{ required:true, message: '请输入正确内容' }]"
                />
            </van-row>
            <van-row class="input-row">
                <van-col span="18">
                    <van-field
                    v-model="duanxin"
                    name="短信验证码"
                    placeholder="短信验证码"
                    :rules="[{ required:true, message: '请输入正确内容' }]"
                    />
                </van-col>
                <van-col span="6" class="yan">
                    <a href="javascript:;" class="send_ticket">获取验证码</a>
                </van-col>
            </van-row>
            <div style="margin: 16px 0;">
                <van-button  block type="info" native-type="submit" color="#ff6700">
                立即登录/注册
                </van-button>
            </div>
        </van-form>
        <!-- 账号登录 -->
        <van-form @submit="onSubmit" v-else-if="btnname == 'pass'" ref="userRef">
            <van-row class="input-row">
                <van-field
                    v-model="username"
                    name="username"
                    placeholder="邮箱/手机号码/小米ID"
                    :rules="[{ required:true, message: '请输入正确内容' }]"
                />
            </van-row>
            <van-row class="input-row">
                <van-col span="24">
                    <van-field
                    v-model="password"
                    :type="passShow === false ?'password' : ''"
                    name="password"
                    placeholder="密码"
                    :rules="[{ required:true, message: '请输入正确内容' }]"
                    :right-icon="passShow === false ?'eye-o' : 'closed-eye' "
                    @click-right-icon="passShowTag"
                    />
                </van-col>
            </van-row>
            <div style="margin: 16px 0;">
                <van-button  block type="info" native-type="submit" color="#ff6700">
                登录
                </van-button>
            </div>
        </van-form>
        <van-row>
            <!-- 切换登录模式 -->
            <van-button type="default" block style="margin-bottom: 15px;"  :native-type="btnname" @click="fromtogget">
                {{this.btnname === 'iphone' ? '用户名密码登录' : '手机短信登录/注册'}}
            </van-button>
            <!-- 手机号登录的收不到验证码 -->
            <van-row type="flex" justify="center" v-if="btnname == 'iphone'">
                <a href="javascript:;">收不到验证码？</a>
            </van-row>
            <!-- 账号登录的注册等等 -->
            <van-row type="flex" justify="center" v-else-if="btnname == 'pass'" class="reverse">
                <a href="javascript:;">立即注册</a>
                <span>|</span>
                <a href="javascript:;">忘记密码？</a>
            </van-row>
            <!-- 其他方式登录模块 -->
            <van-row class="other_login_type">
                <fieldset class="oth_type_tit">
                    <legend align="center" class="oth_type_txt">其他方式登录</legend>
                </fieldset>
            </van-row>
            <van-row type="flex" justify="center" class="oth_type_links">
                <van-col>
                    <a href="javascpirt:;" class="icon_type btn_weibo">
                        <i class="btn_sns_icontype icon_default_weibo"></i>
                    </a>
                </van-col>
                <van-col>
                    <a href="javascpirt:;" class="icon_type btn_alipay">
                        <i class="btn_sns_icontype icon_default_alipay"></i>
                    </a>
                </van-col>
                <van-col>
                    <a href="javascpirt:;" class="icon_type btn_weixin">
                        <i class="btn_sns_icontype icon_default_weixin"></i>
                    </a>
                </van-col>
            </van-row>
        </van-row>
    </div>
</template>

<script>
export default {
  data () {
    return {
      iphone: '',
      duanxin: '',
      btnname: 'pass',
      username: 'admin',
      password: '123456',
      passShow: false
    }
  },
  methods: {
    async onSubmit (values) {
      const res = await this.$http.post('/login', { values })
      if (!res.data.success) {
        return this.$notify({ type: 'warning', message: '请输入正确的账号密码' })
      }
      window.sessionStorage.setItem('token', res.data.token)
      // 2. 通过编程式导航跳转到后台主页，路由地址是 /home
      this.$router.push('/home')
    },
    fromtogget () {
      this.btnname === 'iphone' ? this.btnname = 'pass' : this.btnname = 'iphone'
    },
    passShowTag () {
      this.passShow === true ? this.passShow = false : this.passShow = true
    }
  }
}
</script>

<style lang="less" scoped>
.main {
    width: 100%;
    margin: 0 auto 30px;
    padding: 0 20px;
    position: relative;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

.header {
    padding: 30px 0 10px;
    text-align: center;
}
.milogo {
    width: 48px;
    height: 48px;
    margin: 0 auto 15px;
    display: block;
}
.header_tit_txt {
    font-size: 20px;
    color: #000;
    font-weight: normal;
}
h4 {
    margin: 0;
}
.send_ticket{
    cursor: pointer;
    color: #2ea5e5;
}
.yan{
    margin-top: 8px;
    text-align: center;
    a{
        font-size: 12px;
    }
}
.input-row{
    border-bottom: 1px solid #d3d3d3
}
.van-cell{
    font-size: 16px;
    color: #9b9b9b;
}
.van-button{
    border: 1px solid #d3d3d3;
    border-radius: 5px;
}
a{
    color: #9b9b9b;
}
.oth_type_tit{
    font-size: 12px;
    font-family: "Helvetica Neue",Helvetica,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","微软雅黑",Arial,sans-serif;
    text-align: center;
    margin: 0;
    padding: 0;
    border: 0;
    border-top: 1px solid #f2f2f2;
    padding-top: 10px;
}
.oth_type_txt{
    font-family: "Helvetica Neue",Helvetica,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","微软雅黑",Arial,sans-serif;
    text-align: center;
    margin: 0;
    padding: 0;
    font-size: 10px;
    color: #b0b0b0;
    width: 80px;
}
.other_login_type{
    padding-top: 40px;
}
.btn_sns_icontype {
    background: url(https://account.xiaomi.com/static/res/166d6dc/account-static/respassport/acc-2014/img/icons_type.png) no-repeat;
    display: block;
    width: 18px;
    height: 18px;
    margin: 5px auto 0;
}
.icon_type {
    width: 30px;
    height: 30px;
    margin: 0 10px;
    display: inline-block;
    text-indent: -9999px;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -o-border-radius: 50%;
    border-radius: 50%;
}
.oth_type_links{
    padding-top: 10px;
}
.btn_weibo{
    background-color: #ED9090;
}
.btn_alipay{
    background-color: #6BB6EA;
}
.btn_weixin{
    background-color: #00BE00;
}
.icon_default_weibo {
    background-position: -33px 0;
}
.icon_default_alipay {
    background-position: -50px 0;
    width: 26px;
}
.icon_default_weixin {
    background-position: -75px 0;
    width: 23px;
}
.reverse{
    span{
        font-size: 16px ;
    }
    a{
        padding: 0 9px;
        font-size: 16px ;
    }
}

</style>
